<template>
	<view>
		<!-- 页面布局 S -->
		<view class="tp-pd30 tp-bgf">
			<!-- 房间信息展示 S -->
			<view class="tp-pd30 tp-bbox tp-br12 tp-bcblue tp-fc333">
				<view class="level_align ">
					<view class="level_align flex_between align_baseline  tp-mr15">
						<view class="tp-fz32">{{hotelInfo.startDay && hotelInfo.startDay}}</view>
						<view class="tp-fz26">入住</view>
					</view>
					<view class=" tp-fz24 tp-lh44 tp-ptb0lr20 tp-br40">({{hotelInfo.severalDays}} 晚)</view>
					<view class="level_align flex_between ">
						<view class="tp-fz32">{{hotelInfo.endDay}}</view>
						<view class="tp-fz26">离店</view>
					</view>
				</view>
				<view class="tp-lh72 tp-fz28">
					{{hotelInfo.hotelName}}
				</view>
				<view class="tp-fz24">
					{{hotelInfo.roomLabel}}
				</view>
			</view>
			<!-- 房间信息展示 E -->
			<view class="level_align align_baseline tp-lh72 tp-mt20">
				<text class="tp-fz32 tp-fc333 tp-fw600 tp-mr20">入住信息</text>
				<text class="tp-fc666 tp-fz24">姓名与证件保持一致，每间只需填1人 </text>
			</view>
			<view class="level_align tp-bdbm tp-h98">
				<text class="tp-fz30 tp-mr30">房间数：</text>
				<view class="level_align flex-1 flex_end">
					<input type="number" :placeholder="'请输入房间数,最多'+hotelInfo.inventory+'个'" @input="inputRoom" :value="form.roomNum" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="level_align tp-bdbm tp-h98">
				<text class="tp-fz30 tp-mr30">联系人：</text>
				<view class="level_align flex-1 flex_end">
					<input type="text" placeholder="请填写联系人姓名" value="" v-model="form.name" />
				</view>
			</view>
			<view class="level_align tp-bdbm tp-h98">
				<text class="tp-fz30 tp-mr30">联系电话：</text>
				<view class="level_align flex-1 flex_end">
					<input type="number" placeholder="请填写联系电话" maxlength="11" value="" v-model="form.phone" />
				</view>
			</view>
			<picker mode="time" :value="form.aboutComeTime" @change="bindTimeChange">
				<view class="level_align tp-bdbm tp-h98">
					<text class="tp-fz30 tp-mr30">预计到店时间：</text>
					<view class="level_align flex-1 flex_end">
						<input type="text" disabled placeholder="请选择预计到店时间" :value="daoTime" />
					</view>
				</view>
			</picker>
			<view class="tp-h98 level_align tp-fc333 tp-fz30 tp-fc666">
				备注:
			</view>
			<view class="tp-border1 tp-br12 tp-pd30 tp-bbox">
				<textarea value="" v-model="form.remark" placeholder="请输入备注内容" />
				</view>
		</view>
		<!-- 页面布局 E -->

		<!--入住信息 S -->
		<view class="tp-bgf level_align flex_between tp-h88 tp-mb2 tp-ptb0lr30 tp-mt20">
			<text class="tp-fc333 tp-fz32 tp-fw600">入住人信息</text>
			<view @click="pageJumps('./selectMember')" class="tp-ptb0lr50 tp-fc tp-h56 tp-border1 tp-br40 center_combo tp-fz26"
			 style="border-color: #00B4FF;">
				添加
			</view>
		</view>
		<view class="tp-ptb0lr30 tp-bgf level_align flex_between tp-h98 tp-fc333 tp-fz28" v-for="(item,index) in riderPersionList"
		 :key="index">
			<view class="level_align flex-1">
				<image @click="handleDelRider(item,index)" class="tp-img28 tp-mr20" src="../../static/imgs/icons/del.png" mode=""></image>
				<text class=" tp-fz30 tp-fw600 ellispsis1 tp-mr20" style="max-width: 180rpx;">{{item.passengerName}}</text>
				<text class=" tp-mr20">{{item.phone}}</text>
				<text class="">{{item.star}}</text>
			</view>
			<uni-icons @click="pageJumps('/pagesTravel/bus.addRider?id=' + item.id + '&scene=1')" type="arrowright" size="18"
			 color="#999"></uni-icons>
		</view>
		<!--入住信息 E -->

		<!-- 优惠 S -->
		<view class="tp-mt20 tp-ptb0lr30 tp-bgf tp-fc333">
			<view class="tp-h88 level_align tp-fz32 tp-fw600">
				优惠
			</view>
			<view class="level_align tp-bdbm tp-h98">
				<text class="tp-fz30 tp-mr30">积分抵扣：</text>
				<view class="level_align flex-1 flex_end">
					<input type="number" :placeholder="maxYongJifen" v-model="jifen" @input="inputJifen" />
				</view>
			</view>
			<view class="level_align tp-bdbm tp-h98" @click="handleGoBusCouponList">
				<text class="tp-fz30 tp-mr30">优惠券：</text>
				<view class="level_align flex-1 flex_end">
					<input type="text" disabled :placeholder="integralPlacholde" :value="choosedBusCoupon.couponName" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="level_align tp-bdbm tp-h98">
				<text class="tp-fz30 tp-mr30">离店可获：</text>
				<view class="level_align flex-1 flex_end">
					<input type="text" disabled placeholder="" :value="rewardJifen + '积分'" />
				</view>
			</view>
		</view>
		<!-- 购买须知 S-->
		<view class="tp-ptb0lr30">
			<view class="tp-pt20" @click="bxtype = !bxtype">
				<image v-if="bxtype" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;" src="../static/icon/choose1-icon.png"
				 mode="aspectFill"></image>
				<image v-if="!bxtype" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;" src="../static/icon/choose0-icon.png"
				 mode="aspectFill"></image>
				<text class="tp-fz28">请您仔细阅读</text>
				<text class="tp-fz28 " style="color: #00b4ff;" @click.stop="pageJumps('/pages/others/depositRule?type=15&name=酒店订单说明')">《酒店订单说明》</text>
				<!-- @click.stop="handleGoInsuranceDetail(it_n, 2)" -->
			</view>
		</view>
		<!-- 购买须知 E-->
		<view class="tp-h98 tp-mt30"></view>
		<!-- 优惠 E -->
		<!-- 底边框 S -->
		<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100" style="z-index: 10;">
			<view class="level_align">
				<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
				<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
			</view>
			<view class="level_align">
				<view class="level_align tp-mr30" @click="handleShowPriceDetail">
					<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
					<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
				</view>
				<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
					预定
				</view>
			</view>
		</view>
		<!-- 底边框 E -->


		<uni-popup ref="priceDetail" type="bottom">
			<view class="popop_content">
				<view class="tp-ptb0lr30 tp-fz30">
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>房间价格</text>
						<view class="level_align">
							<text>￥{{hotelInfo.currentPrice}}</text><text>×{{hotelInfo.severalDays}}天</text><text>×{{form.roomNum ||　0}}个房间</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>优惠券抵扣</text>
						<view class="level_align">
							<text>-￥{{choosedBusCoupon && choosedBusCoupon.amount || 0}}</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>积分抵扣</text>
						<view class="level_align">
							<text>-￥{{trueJifen || 0}}({{form.jifen}}积分)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tp-h2 tp-bcF5"></view>
			<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100" style="z-index: 10;">
				<view class="level_align">
					<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
					<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
				</view>
				<view class="level_align">
					<view class="level_align tp-mr30" @click="handleShowPriceDetail('close')">
						<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
						<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
					</view>
					<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
						预定
					</view>
				</view>
			</view>
		</uni-popup>
		<CommonPaySecond ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	import $DB from "../..//utils/debounce.js"
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				hotelInfo: {}, // 房间信息
				form: {
					roomNum: null, // 房间数 参与计算
					name: '', // 	联系人
					phone: '', // 	手机号
					aboutComeTime: null, // 预计到店时间
					remark: '', // 备注
					hotelCustomerCouponId: '', // 用户领取的酒店优惠券ID
					jifen: 0, //	用户消费的积分(请给个默认值0)
				},
				daoTime: '', // 预计到店时间拼接
				couponList: [], // 优惠券列表
				rewardJifen: 0, // 离店可获积分
				maxYongJifen: '', // 可用积分说明
				bxtype: false, // 阅读协议
				jifen: null, // 输入框输入的
				trueJifen: 0, // 实际抵扣积分

				orderId: '', // 订单id
			};
		},
		async onLoad(opt) {
			console.log(opt.info);
			this.hotelInfo = opt.info && JSON.parse(opt.info)
			await this.getcustomerInfo()
			this.$store.commit('delRiderList')
			this.$store.commit('delChoosedBusCoupon')
			this.form.phone = this.getCustomerInfo.mobile
			if (Number(this.getCustomerInfo.rewardPoint) < Number(this.hotelInfo.maxJifen)) {
				this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可使用 ' + this.getCustomerInfo.rewardPoint +
					' 积分抵扣'
			} else {
				this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可使用 ' + (this.hotelInfo.maxJifen || 0) +
					' 积分抵扣'
			}

		},
		onShow() {},
		computed: {
			// 积分选择提示
			integralPlacholde() {
				return this.couponList.length === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			
			// 优惠前的价格
			originalPrice(){
				let money = 0;
				// 房间价钱
				if (this.form.roomNum) {
					money += Number(this.hotelInfo.currentPrice) * Number(this.hotelInfo.severalDays) * Number(this.form.roomNum)
				}
				money = parseFloat((money).toFixed(2))
				return money
			},
			
			// 总价/
			totalMoney() {
				let money = 0;
				// 房间价钱
				if (this.form.roomNum) {
					money += Number(this.hotelInfo.currentPrice) * Number(this.hotelInfo.severalDays) * Number(this.form.roomNum)
				}
				// 优惠券抵扣
				if (this.choosedBusCoupon && this.choosedBusCoupon.amount) {
					money -= Number(this.choosedBusCoupon.amount)
					if(money < 0){
						money = 0
					}
				}
				// 积分抵扣
				if (money > (Number(this.hotelInfo.maxJifen) / 100) || money > (Number(this.jifen) / 100)) { // 房间费用大于 最多抵扣积分或者  输入的积分 才可以使用积分
					if (Number(this.getCustomerInfo.rewardPoint) < Number(this.hotelInfo.maxJifen) && Number(this.jifen) > Number(this.getCustomerInfo.rewardPoint)) {
						// 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分
						// console.log(' 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分');
						this.trueJifen = parseFloat(((this.getCustomerInfo.rewardPoint / 100) * Number(this.getCustomerInfo.jifenDiscount))
							.toFixed(2))
						this.form.jifen = this.getCustomerInfo.rewardPoint
					} else if (Number(this.jifen) > Number(this.hotelInfo.maxJifen)) {
						// 积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的
						// console.log('积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的');
						this.trueJifen = parseFloat(((this.hotelInfo.maxJifen / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(
							2))
						this.form.jifen = this.hotelInfo.maxJifen
					} else {
						// 积分充足 并且 输入的积分小于可抵扣的  取 输入的
						// console.log('积分充足 并且 输入的积分小于可抵扣的  取 输入的');
						this.trueJifen = parseFloat(((Number(this.jifen) / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(2))
						this.form.jifen = this.jifen || 0
					}
				}
				money -= Number(this.trueJifen)
				money = parseFloat((money).toFixed(2))
				return money
			},
			// 出行人
			riderPersionList() {
				let arr = this.$store.getters.getRiderList
				if (arr && arr[0] && arr[0].star) {
					return this.$store.getters.getRiderList
				} else {
					arr.map(item => {
						item.star = utils.employStarHidden(item.certificateNumber, 4, 4)
					})
					return arr
				}
			},
			orderInfo() {
				let o = {
					orderId: this.orderId,
					type: 1,
					orderType: 1
				}
				return o
			},
			// // 获取选择优惠券
			choosedBusCoupon: {
				get() {
					return this.$store.getters.getChoosedBusCoupon
				},
				set() {}
			}
		},
		watch: {
			totalMoney() {
				this.getRewardJifen()
			},
			originalPrice() {
				this.getHotelUseCouponList()
			}
		},
		methods: {
			// 提交订单
			handeSubmitOrder() {

				let {
					hotelId,
					roomId,
					beginTime,
					endTime
				} = this.hotelInfo
				let {
					roomNum,
					name,
					phone,
					aboutComeTime,
					remark,
				} = this.form
				let hotelCustomerCouponId = this.choosedBusCoupon && this.choosedBusCoupon.hotelCustomerCouponId && this.choosedBusCoupon
					.hotelCustomerCouponId
				let arr = []
				if (!roomNum) return uni.showToast({
					title: '请填写房间数量',
					icon: 'none'
				})
				if (!name) return uni.showToast({
					title: '请填写联系人',
					icon: 'none'
				})
				// if (!aboutComeTime) return uni.showToast({
				// 	title: '请选择到店时间',
				// 	icon: 'none'
				// })
				if (!this.riderPersionList.length) return uni.showToast({
					title: '请选择入住人',
					icon: 'none'
				})
				if (!this.$regexPhone.test(phone)) return uni.showToast({
					title: '请检查手机号是否正确',
					icon: 'none'
				})
				if(this.jifen != this.form.jifen){
					if (Number(this.totalMoney) < ( Number(this.jifen) / 100)) {
						return uni.showToast({
							title: '所使用积分超出总价',
							icon: 'none'
						})
					} else if (Number(this.jifen) > Number(this.getCustomerInfo.rewardPoint)) {
						return uni.showToast({
							title: '没有这么多的积分',
							icon: 'none'
						})
					} else if (Number(this.jifen) > Number(this.hotelInfo.maxJifen)) {
						return uni.showToast({
							title: '最多只能使用' + this.hotelInfo.maxJifen + '积分抵扣',
							icon: 'none'
						})
					}
				}
				if (!this.bxtype) return uni.showToast({
					title: '请阅读协议说明',
					icon: 'none'
				})

				const _this = this
				this.$http.post(this.$api.hotelPreUnifieldOrder, {
						hotelId,
						roomId,
						beginTime,
						endTime,
						roomNum,
						name,
						phone,
						aboutComeTime,
						remark,
						hotelCustomerCouponId,
						jifen: this.form.jifen || 0,
						frontTotal: this.totalMoney,
						orderMemberVoList: this.riderPersionList
					})
					.then(res => {
						if (res.code === 200) {
							_this.$refs.commonPay.show()
							_this.orderId = res.data
						}
					})
			},
			// 余额支付成功
			payMoney(pwd) {
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(this.$api.payHotelOrderByYue, {
					orderId: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.finishCloseKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: '/pagesUser/order/hotelOrderDetail?id=' + this.orderId
							});
						},600)
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: '/pagesUser/order/hotelOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: '/pagesUser/order/hotelOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 获取可用优惠券
			getHotelUseCouponList() {
				this.$http.get(this.$api.hotelUseCouponList + '?hotelId=' + this.hotelInfo.hotelId + '&orderPrice=' + this.originalPrice)
					.then(res => {
						if (res.code === 200) {
							this.couponList = res.data
							if (!res.data.length) {
								this.$store.commit('delChoosedBusCoupon')
							}
						}
					})
			},
			// 奖励积分计算
			getRewardJifen() {
				this.$http.get(this.$api.rewardJifen + '?shopType=1&shopId=' + this.hotelInfo.hotelId + '&orderPrice=' + this.totalMoney)
					.then(res => {
						if (res.code === 200) {
							this.rewardJifen = res.msg
						}
					})
			},
			//跳转选择优惠券列表
			handleGoBusCouponList() {
				if (!this.couponList.length) return
				uni.navigateTo({
					url: './selectCoupon?pageName=hotel&totalPrice=' + this.originalPrice + '&id=' + this.hotelInfo.hotelId
				})
			},
			// 去除当前这个出行人
			handleDelRider(item) {
				this.riderPersionList.forEach((it_, in_) => {
					if (item.id === it_.id) {
						this.$store.commit('delRiderList', in_)
					}
				})
			},
			// 输入房间数
			inputRoom(e) {
				if (e.detail.value < 1) {
					this.form.roomNum = null
						setTimeout(() => {
							uni.showToast({
								title: '请输入不大于剩余房间的正整数',
								icon: 'none'
							})
						},20)
					return
				} else if (Number(e.detail.value) > Number(this.hotelInfo.inventory)) {
					this.form.roomNum = null
					setTimeout(() => {
						uni.showToast({
							title: '没有那么多的房间',
							icon: 'none'
						})
					},20)
					return
				} else {
					this.form.roomNum = Number(e.detail.value)
				}
			},
			// 输入积分
			inputJifen: $DB(function(e) {
				console.log(e);
				if (Number(this.totalMoney) < ( Number(e.detail.value) / 100)) {
					return uni.showToast({
						title: '总价过低',
						icon: 'none'
					})
				} else if (Number(e.detail.value) > Number(this.getCustomerInfo.rewardPoint)) {
					return uni.showToast({
						title: '没有这么多的积分',
						icon: 'none'
					})
				} else if (Number(e.detail.value) > Number(this.hotelInfo.maxJifen)) {
					return uni.showToast({
						title: '最多只能使用' + this.hotelInfo.maxJifen + '积分抵扣',
						icon: 'none'
					})
				}
			}),
			// 选择到店时间
			bindTimeChange(e) {
				this.form.aboutComeTime = e.target.value
				this.daoTime = e.target.value + ' (房间将整晚保留)'
			},
			// 切换明细
			handleShowPriceDetail(s) {
				if (s === 'close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popop_content {
		background-color: #fff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		padding: 20rpx 30rpx 98rpx;
	}
</style>
